<script setup>
import { ref, watch } from 'vue'
import { getUserByIdService } from '@/api/user.js'

const props = defineProps({
  userId: {
    type: Number,
    required: true
  }
})

// 用户角色、用户状态与el-tag类型映射
const userRoleTagTypeMap = {
  管理员: 'danger',
  员工: 'primary',
  会员: 'success'
}
const userStatusTagTypeMap = {
  启用: 'success',
  禁用: 'danger'
}
const getUserRoleTagType = (role) => {
  return userRoleTagTypeMap[role] || 'info'
}
const getUserStatusTagType = (status) => {
  return userStatusTagTypeMap[status] || 'info'
}

// 获取用户信息
const userInfo = ref({})
const getUserById = async (id) => {
  const res = await getUserByIdService(id)
  userInfo.value = res.data.data
}

// 监听 userId 的变化，当 userId 变化时重新获取用户信息
watch(
  () => props.userId,
  (newId) => {
    if (newId) {
      getUserById(newId)
    }
  },
  { immediate: true }
)
</script>

<template>
  <el-form :model="userInfo" label-position="left">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="用户ID">
          <el-tag type="info">{{ userInfo.id }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="姓名">
          <el-tag type="info">{{ userInfo.name }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="性别">
          <el-tag type="info">{{ userInfo.gender ?? '---' }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="年龄">
          <el-tag type="info">{{ userInfo.age ?? '---' }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="移动电话">
          <el-tag type="info">{{ userInfo.mobilePhone }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="身份证号码">
          <el-tag type="info">{{ userInfo.idNumber }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="电子邮箱">
          <el-tag type="info">{{ userInfo.email ?? '---' }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="地址">
          <el-tag type="info">{{ userInfo.address ?? '---' }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="用户状态">
          <el-tag :type="getUserStatusTagType(userInfo.status)">{{ userInfo.status }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="用户角色">
          <el-tag :type="getUserRoleTagType(userInfo.role)">{{ userInfo.role }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="创建时间">
          <el-tag type="info">{{ userInfo.createTime }}</el-tag>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="更新时间">
          <el-tag type="info">{{ userInfo.updateTime }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="上次登录时间">
          <el-tag type="info">{{ userInfo.lastLoginTime }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
